<!--
 * @Description: 
 * @Author: mmzhang
 * @Date: 2022-10-24 15:06:30
 * @LastEditTime: 2022-12-08 10:36:19
-->
<template>
  <!--其他查询-->
  <div class="flex flex-vertical-center choose-tab">
    <div class="flex ">
      <ul class="flex flex-horizontal-between flex-vertical-center date-list" style="padding:0 20px;min-width:300px">
        <li v-for=" (item,index) in dateList" :key="index"
          :class="[{'selected':index==checkIndex}]" @click="initDateFun(item.key)">{{item.title}}
        </li>
      </ul>
      <div class="flex flex-vertical-center" style="min-width:300px;">
        <span class="check-time"> 自定义：</span>
        <DatePicker type="daterange" :clearable="false" @on-change="dateChoose" ref="oselect"
          placeholder="请选择时间" v-model="dateTime" :options="options"></DatePicker>
      </div>
    </div>
  </div>
</template>
<script>
  import homeMgr from '@/biz/buildingHome/home'
  export default {
    props:{
      dateList:{
        type:Array,
        default:function(){
          return [
            {
              title: '昨日',
              key: 0
            }, {
              title: '今日',
              key: 1
            }, {
              title: '本周',
              key: 2
            }, {
              title: '本月',
              key: 3
            }, {
              title: '本年',
              key: 4
            }
          ]
        }
      }
    },
    data() {
      return {
        resolveTime: {
          startTime: '',
          endTime: ''
        },
        checkIndex:1,
        dataText:'',
        dateTime:[],
        options: {
          disabledDate(date) {
            return (
              date &&
              date.valueOf() < new Date().getTime() - 365 * 2 * 24 * 3600 * 1000
            )
          },
        },
      }
    },
    created() {
    },
    mounted() {},
    methods: {
      // 初始化
      initDateFun(checkIndex) {
        this.checkIndex = checkIndex
        this.dateTime = []
        this.resolveTime = homeMgr.resovleTime(this.checkIndex)
        let filterArr = this.dateList.filter(item=>item.key==this.checkIndex)
        this.dataText = filterArr.length?filterArr[0].title:'累计'
        this.$emit('oncheckDate', this.checkIndex, this.resolveTime, this.dataText)
      },
      dateChoose(val) {
        if (val[0] == '' || val[1] == '') {
          return false
        }
        
        if (this.$tool.dateDiff(val[0],val[1]).Y >= 2) {
          this.dateTime = []
          this.$Message.info('自定义日期跨度至多两年')
          return false
        }

        this.checkIndex = null
        this.dataText = '累计'
        this.resolveTime = {
          startTime: val[0],
          endTime: val[1],
        }
        this.$emit('oncheckDate', this.checkIndex, this.resolveTime, this.dataText)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .choose-tab {
    max-width: 65%;

    li {
      padding: 0 5%;
      color: #666;
      height: 50px;
      line-height: 50px;
      word-break: keep-all;
      cursor: pointer;
    }

    li.selected {
      border-bottom: 3px solid #0088ff;
      color: #0088ff;
      font-weight: 600;
    }

    .check-time {
      word-break: keep-all;
      padding: 0 5%;
      color: #666;
      height: 50px;
      line-height: 50px;
      max-width: 85px;
    }
  }
</style>